<template>
	<view class="bind-phone">
		<view class="status flex flex-column align-center">
			<block v-if="type !== 'request'">
				<text class="iconfont">&#xe65d;</text>
				<text class="status-text">登录成功</text>
			</block>
		</view>
		
		<view class="msg">
			<!-- <text v-if="type !== 'noAccount'" class="block">欢迎您，{{ loginData.company_name }} — {{ loginData.role_name }}</text> -->
			<text class="block">请提供您的手机号码作为提交人身份标识</text>
			<text class="block">方可提交用车申请</text>
		</view>
		
		<view class="submit">
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权</button>
		</view>
		
		<nick-name ref="name"></nick-name>
	</view>
</template>

<script>
	import nickName from './nick-name.vue'
	import { mapState, mapActions } from 'vuex'
	
	export default {
		components:{ nickName },
		data() {
			return {
				type: ''
			};
		},
		computed:{
			...mapState('login', ['loginData']),
			...mapState('common', ['appid']),
		},
		onLoad(options) {
			this.type = options.type
		},
		methods:{
			...mapActions('login', ['getUserInfo']),
			
			getPhoneNumber(event) {
				const { code, encryptedData, iv } = event.detail
				const params = {
					appid: this.appid,
					code,
				}
				if (this.type === 'noAccount') {
					this.notAccount(params)
				} else {
					this.phoneVerify(params)
				}
			},
			
			phoneVerify(params) {
				this.$api.phoneVerifyApi(params).then(res=>{
					this.getUserInfo()
					if (!res.data.roster_name) {
						this.$refs.name.open()
					} else {
						uni.showToast({
							title: res.retmsg
						})
						if (this.type === 'request') {
							 setTimeout(()=>{
							 	uni.navigateBack()
							 }, 1200)
						} else {
							setTimeout(()=>{
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 1200)
						}
						
					}
				}).catch(err=>{
					console.log('err', err);
				})
			},
			
			notAccount(params) {
				this.$api.notAccountApi(params).then(res=>{
					this.$store.commit('login/SET_TOKEN', res.data.access_token)
					this.$store.commit('loginSET_LOGIN_DATA', res.data)
					if (!res.data.roster_name) {
						this.$refs.name.open()
					} else {
						uni.showToast({
							title: res.retmsg
						})
						setTimeout(()=>{
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1200)
					}
					this.getUserInfo()
				}).catch(err=>{
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bind-phone{
		flex: 1;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		
		.status{
			padding: 60rpx 0;
			
			.iconfont{
				color: green;
				font-size: 128rpx;
			}
			
			.status-text{
				font-size: 28rpx;
				font-weight: bold;
				padding-top: 24rpx;
			}
		}
		
		.msg{
			width: 80%;
			font-size: 28rpx;
			line-height: 1.8;
			text-align: center;
		}
		
		
		.submit{
			width: 80%;
			padding-top: 180rpx;
			
			button{
				width: 100%;
				color: #FFFFFF;
				font-size: 32rpx;
				border-radius: 8rpx;
				background-color: var(--primary-color);
			}
		}
		
	}
</style>
